<template>
  <div class="d_box">
    <div class="search">
      <el-form ref="form" label-width="80px">
        <el-form-item label="标题">
          <el-input size="mini" v-model="title"></el-input>
          <el-button size="mini" type="primary">
        <i class="el-icon-search"></i>查询</el-button>
        <el-button size="mini" type="primary" @click="toCreate">
        <i class="el-icon-plus"></i>新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="articleList" size="mini" style="width: 96%; margin: auto;" height="400"
              cell-style="height: 30px; line-height: 30px;"
              header-cell-style="background: rgb(237, 239, 247);font-weight: normal;">
      <el-table-column label="序号" width="150">
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
      <el-table-column prop="discuss_id" label="文章ID" width="150">
      </el-table-column>
      <el-table-column prop="title" label="标题" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="keyword" label="关键字" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="type_name" label="文章类型">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
        <el-button
          @click.native.prevent="handleEdit(scope.row)"
          type="text"
          size="small">
          编辑
        </el-button>
        <el-button
          @click.native.prevent="handleDelete(scope.row.discuss_id)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout=" prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>
    </div>
    <article-update ref="articleUpdate" :obj="obj"></article-update>
    <create-article ref="createArticle"></create-article>
  </div>
</template>
<script>
import request from "@/utils/request";
import ArticleUpdate from "@/views/article-manager/handle/ArticleUpdate"
import CreateArticle from "@/views/article-manager/handle/CreateArticle"
import handle_mixin from "@/mixin/handle-mixin";
// import Pagination from "@/components/Pagination";
export default {
  name: "ArticleManager",
  mixins: [handle_mixin],
  components: {
    // Pagination,
    ArticleUpdate,
    CreateArticle
  },
  data() {
    return {
      obj: {},
      articleList: [],
      title: "",
      currentPage: 1, //默认第一页
      total: 0, //总条数
      pageSize: 10 //默认第一页展示10条
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    headerRowClass() {
      let p = {
        background: 'red'
      }
      return p;
    },
    getList() {
      request({
        url: "/api/article/list",
        method: "post",
        data: {}
      }).then(res => {
        console.log(res);
        if (res.msg === "查询成功") {
          this.articleList = res.list;
          this.total = this.articleList.length;
        }
      });
    },
    handleEdit(row) {
      // this.$router.push({
      //   name: "ArticleUpdate",
      //   params: row
      // });
      
      this.open_dialog('articleUpdate');
      this.obj = row;
      
    },
    handleDelete(id) {
      request({
        url: "/api/article/deleteArticle",
        method: "post",
        data: { id: id }
      }).then(res => {
        console.log(res);
        if (res.msg === "删除成功") {
          this.$message({
            message: "删除成功！",
            type: "success"
          });
          this.getList();
        }
      });
    },
    toCreate() {
      console.log('新增')
      this.open_dialog('createArticle');
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};

</script>
<style lang="scss">
.d_box {
  background: #fff;
  height: 100%;
  margin: auto;
  .search {
    width: 30%;
    float: left;
  }


  .page {
    width: 30%;
    margin: auto;
    margin-top: 50px;
  }
}

</style>
